<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="800px"
      append-to-body
      @close="closeDialog(0)"
    >
      <el-form
        ref="formInfo"
        :rules="rules"
        :model="formInfo"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-form-item label="客户名称：" prop="nickname">
          <el-input v-model="formInfo.nickname" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="客户手机：" prop="phone">
          <!-- <el-input v-model.number="formInfo.code" type="number" onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" /> -->
          <el-input v-model.number="formInfo.phone" placeholder="请输入客户手机" />
        </el-form-item>
        <el-form-item label="客户类别：" prop="type">
          <el-select style="width:50%" v-model="formInfo.type" clearable placeholder="请选择客户类别">
            <el-option
              v-for="item in type"
              :key="item.userId"
              :label="item.value"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="客户性别：" prop="sex">
          <el-select style="width:50%" v-model="formInfo.sex" clearable placeholder="请选择客户性别">
            <el-option
              v-for="item in sex"
              :key="item.userId"
              :label="item.value"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生日：" prop="birthday">
          <!-- <el-col :span="6"> -->
          <el-date-picker style="width:50%" v-model="formInfo.birthday" type="date" placeholder="选择日期"></el-date-picker>
          <!-- </el-col> -->
        </el-form-item>
        <el-form-item label="学习目标：" prop="target">
          <el-select style="width:50%" v-model="target" @change="targetcli" clearable placeholder="请选择">
            <el-option
              v-for="item in formInfo.target"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学习内容：" prop="content">
          <el-select style="width:50%" v-model="content" @change="contentcli" clearable placeholder="请选择">
            <el-option
              v-for="item in formInfo.content"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学习时长：" prop="duration">
          <el-select style="width:50%" v-model="duration" @change="durationcli" clearable placeholder="请选择">
            <el-option
              v-for="item in formInfo.duration"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="路程花费：" prop="cost">
          <el-select style="width:50%" v-model="cost" @change="costcli" clearable placeholder="请选择">
            <el-option
              v-for="item in formInfo.cost"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="来源渠道：" prop="channel">
          <el-select style="width:50%" v-model="channel" @change="channelcli" clearable placeholder="请选择">
            <el-option
              v-for="item in formInfo.channel"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="closeDialog(0)">取消</el-button>
          <el-button type="primary" @click="submitForm('formInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </transition>
</template>

<script>
import { Add, Addcontent } from "@/api/user";
var moment = require('moment');
import Base64 from "@/utils/base";
export default {
  name: "DialogComponent",
  inject: ["reload"],
  props: {
    dialogTitle: {
      type: String,
      default: ""
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {
      rules: {
        nickname: [
          { required: true, message: "请输入客户名称", trigger: "change" }
        ],
        phone: [
          { required: true, message: "请输入客户手机", trigger: "change" }
        ],
        type: [{ required: true, message: "请选择客户类别", trigger: "blur" }],
        sex: [{ required: true, message: "请选择客户性别", trigger: "blur" }]
      },
      target: "",
      content: "",
      duration: "",
      cost: "",
      channel: "",
      showDialog: false,
      type: [
        {
          userId: 1,
          value: "微信用户"
        },
        {
          userId: 2,
          value: "普通会员"
        },
        {
          userId: 3,
          value: "会员"
        }
      ],
      sex: [
        {
          userId: 1,
          value: "保密"
        },
        {
          userId: 2,
          value: "女"
        },
        {
          userId: 3,
          value: "男"
        }
      ],
      objectives: [
        {
          userId: 0,
          value: "暂无"
        },
        {
          userId: 1,
          value: "年级前十"
        }
      ],
      time: [
        {
          userId: 0,
          value: "2小时"
        },
        {
          userId: 1,
          value: "1小时"
        }
      ],
      price: [
        {
          userId: 0,
          value: "100"
        },
        {
          userId: 1,
          value: "120"
        }
      ],
      parmes: {
        name: this.$store.state.user.name,
        page: 1
      },
      formInfo: ""
    };
  },
  mounted() {
    // this.getOpt()
  },
  created() {
    // console.log(this.adddata);
    this.getaddcontent();
    // this.formInfo = this.adddata;
  },
  methods: {
    getaddcontent() {
      Addcontent().then(res => {
        this.formInfo = res.result;
      });
    },
    targetcli(e){
      this.formInfo.target_id = e
    },
    contentcli(e){
      this.formInfo.content_id = e

    },
    durationcli(e){
      this.formInfo.length_id = e
    },
    costcli(e){
      this.formInfo.cost_id = e

    },
    channelcli(e){
      this.formInfo.channel_id = e

    },
    //   获取下拉框
    // getOpt() {
    //   this.getRequest('/asset/getTypeList', {}).then(res => {
    //     this.options = res.obj
    //   })
    // },
    // 保存操作
    submitForm(formName) {
      this.$set(this.formInfo, 'birthday', moment(this.formInfo.birthday).format('YYYY-MM-DD'))
      // console.log(this.formInfo, "123");
      // return
      //   const params = Object.assign(that.formInfo, {});
      this.$refs[formName].validate(valid => {
        if (valid) {
          let adddataform = {
            nickname: this.formInfo.nickname || "",
            phone: this.formInfo.phone || "",
            type: this.formInfo.type || "",
            sex: this.formInfo.sex || "",
            birthday: this.formInfo.birthday || "",
            target_id: this.formInfo.target_id || "",
            length: this.formInfo.length_id || "",
            cost: this.formInfo.cost_id || "",
            channel_id: this.formInfo.channel_id || "",
            content_id: this.formInfo.content_id || ""
          };
          Add({
            request_data: Base64.encode(JSON.stringify(adddataform))
          }).then(res => {
             if(res.status==2){
          this.$message({
            message:res.message,
            type:'warning'
          })
          return
        }
            this.showDialog = false;
            this.reload();
          });
          that.closeDialog(1);
          // 走保存请求
        } else {
          return false;
        }
      });
    },
    // getinfo(){
    //   let formdata = Base64.encode(JSON.stringify(this.parmes))
    //   getUserList({request_data:formdata}).then((res) => {
    //     console.log(res)
    //     // this.list = res.data.items
    //     // this.listLoading = false
    //   })
    // },
    // 关闭弹框
    closeDialog(flag) {
      this.$refs["formInfo"].resetFields();
      this.showDialog = false;
      this.$emit("closeDialog", flag);
    }
  }
};
</script>

<style scoped lang="scss">
.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>
